<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<div id="app">
			<h2>'动态显示'+{{message}}</h2>
			<!-- 只显示一次内容，不跟随值的变化而变化 -->
            <!--如果显示的信息后续不需要再修改，使用v-once，这样可以提高性能-->
			<h2 v-once>'只显示一次'+{{message}}</h2>
			<!-- 解析html标签 -->
			<h3 v-html="url"></h3>
			<!-- 覆盖标签文本 -->
			<h3 v-text="message">原来的被覆盖了，v-text覆盖了原来标签中的内容</h3>
			<!-- 原样显示标签里的内容 ,也就是不编辑操作-->
            <!--即使data里面定义了message这里仍然是显示的{{message} -->
			<h3 v-pre="message">{{message}}+'跳过这个元素和它子元素的编译过程，显示原本的Mustache语法'</h3>
		</div>

		<script src="../vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			let app = new Vue({
				el: '#app',
				data: {
					message: 'hello',
					result: 'cc',
					url: "<a href='www.baidu.com'>百度一下</a>"
				}
			});
		</script>
	</body>
</html>
